<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>联系我们</title>
        <link rel="stylesheet" href="css/uikit.css" />
        <link rel="stylesheet" href="css/style.css" />
        <script src="js/jquery.min.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>
        <script>
            $(document).ready(function(){
                $('.gotop').on({click: function(){
                            document.body.scrollTop = 0;
                            document.documentElement.scrollTop = 0;

                    }
                })
                
            })
        </script>
    </head>
    <body>
        <header>
            <div class="flexR head">
                <a href="index.html" class="logo">
                    <img src="images/logo.png" />
                </a>
                <button class="uk-button navBtn" type="button">
                    <img src="images/btn.png" />
                </button>
                <nav uk-dropdown>
                    <ul class="navclass flexC uk-nav uk-dropdown-nav">
                        <li  class="active">
                            <a href="index.html" class="curra">首页</a>
                        </li>
                        <li>
                            <a href="about.html" class="curra">关于我们</a>
                            <!-- <div uk-dropdown="animation: uk-animation-slide-top-small; duration: 500;delay-hide:100">
                                <ul class="uk-nav uk-dropdown-nav"  >
                                    <li>
                                        <a href="news.html" >新闻中心</a>
                                    </li>
                                    <li>
                                        <a href="video.html" >视频中心</a>
                                    </li>
                                </ul>
                            </div> -->
                        </li>
                        <li>
                            <a href="product.html" class="curra">产品中心</a>
                            <div uk-dropdown="animation: uk-animation-slide-top-small; duration: 500;delay-hide:100">
                                <ul class="uk-nav uk-dropdown-nav"  >
                                    <li>
                                        <a href="price.html" >产品报价</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="free.html" class="curra">免费试用</a>
                        </li>
                        <li>
                            <a href="login.html" class="curra">用户登录</a>
                        </li>
                        <li>
                            <a href="contact.html" class="curra">联系我们</a>
                        </li>
                    </ul>
                </nav>
          </div>
        </header>
        <div class="concact_map">
           <div class="mapTitle">
            <h1 uk-scrollspy="cls: uk-animation-slide-bottom; repeat: true; delay: 100">Service Department</h1>
            <p uk-scrollspy="cls: uk-animation-slide-bottom; repeat: true; delay: 200">地图定位</p>
           </div>
           <div style="width:100%;height:200px;" id="dituContent"></div>
        </div>
        <div class="kefu">
            <div class="mapTitle">
                <h1 uk-scrollspy="cls: uk-animation-slide-bottom; repeat: true; delay: 100">Customer service specialist</h1>
                <p uk-scrollspy="cls: uk-animation-slide-bottom; repeat: true; delay: 200">客服专员</p>
            </div>
            <div class="kefu_Num" uk-scrollspy="cls: uk-animation-slide-bottom; repeat: true; delay: 200">
                <p>＋86  139-1303-8359</p>
            </div>
        </div>

        <footer>
            <div class="foot">
                <div class="foot_right">
                    <div>
                        <img src="images/ewm.png" />
                        <span>客服微信</span>
                    </div>
                    <!-- <div  uk-scrollspy="cls: uk-animation-slide-bottom; repeat: true">
                        <img src="images/ewm_two.png" />
                        <span>客服微信</span>
                    </div> -->
                </div>
                <div class="footTel">
                    <p>联系方式：王经理 139-1303-8359</p>
                    <p>公司地址：江苏省南京市凤华路18号紫金（雨花）<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     科技创业特别社区2栋阿尔法楼B301</p>
                    <img src="images/topbtn.png" class="gotop" />
                </div>
            </div>
        </footer>
        <script type="text/javascript">
            //创建和初始化地图函数：
            function initMap(){
                createMap();//创建地图
                setMapEvent();//设置地图事件
                addMapControl();//向地图添加控件
                addMarker();//向地图中添加marker
            }
            
            //创建地图函数：
            function createMap(){
                var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
                var point = new BMap.Point(118.644935,31.939672);//定义一个中心点坐标
                map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
                window.map = map;//将map变量存储在全局
            }
            
            //地图事件设置函数：
            function setMapEvent(){
                map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
                map.enableScrollWheelZoom();//启用地图滚轮放大缩小
                map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
                map.enableKeyboard();//启用键盘上下左右键移动地图
            }
            
            //地图控件添加函数：
            function addMapControl(){
                //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
            map.addControl(ctrl_nav);
                //向地图中添加缩略图控件
            var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
            map.addControl(ctrl_ove);
                //向地图中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
            map.addControl(ctrl_sca);
            }
            
            //标注点数组
            var markerArr = [{title:"众慧美科技中心",content:"江苏省南京市雨花台区风华路18号8幢",point:"118.644472|31.939672",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
                ];
            //创建marker
            function addMarker(){
                for(var i=0;i<markerArr.length;i++){
                    var json = markerArr[i];
                    var p0 = json.point.split("|")[0];
                    var p1 = json.point.split("|")[1];
                    var point = new BMap.Point(p0,p1);
                    var iconImg = createIcon(json.icon);
                    var marker = new BMap.Marker(point,{icon:iconImg});
                    var iw = createInfoWindow(i);
                    var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+20,-20)});
                    marker.setLabel(label);
                    map.addOverlay(marker);
                    label.setStyle({
                                borderColor:"#080c29",
                                color:"#333",
                                cursor:"pointer"
                    });
                    
                    (function(){
                        var index = i;
                        var _iw = createInfoWindow(i);
                        var _marker = marker;
                        _marker.addEventListener("click",function(){
                            this.openInfoWindow(_iw);
                        });
                        _iw.addEventListener("open",function(){
                            _marker.getLabel().hide();
                        })
                        _iw.addEventListener("close",function(){
                            _marker.getLabel().show();
                        })
                        label.addEventListener("click",function(){
                            _marker.openInfoWindow(_iw);
                        })
                        if(!!json.isOpen){
                            label.hide();
                            _marker.openInfoWindow(_iw);
                        }
                    })()
                }
            }
            //创建InfoWindow
            function createInfoWindow(i){
                var json = markerArr[i];
                var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
                return iw;
            }
            //创建一个Icon
            function createIcon(json){
                var icon = new BMap.Icon("images/addIcon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
                return icon;
            }
            
            initMap();//创建和初始化地图
        </script>
    </body>
</html>